{% extends "base.html" %}
{% block title %}银行卡开户{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题和面包屑导航 -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="bi bi-credit-card-2-front-fill text-primary"></i> 银行卡开户
        </h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('admin_dashboard') }}">首页</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('admin_cards') }}">银行卡管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">开户</li>
            </ol>
        </nav>
    </div>

    <!-- 错误消息显示 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                <i class="bi bi-{{ 'exclamation-triangle-fill' if category == 'error' else 'check-circle-fill' }} me-2"></i>
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <!-- 表单卡片 -->
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white">
            <h5 class="card-title mb-0">
                <i class="bi bi-pencil-square me-2"></i>银行卡开户信息
            </h5>
        </div>
        <div class="card-body">
            <form method="POST" id="addCardForm" class="needs-validation" novalidate>
                <div class="row g-3">
                    <!-- 自动生成的卡号显示 -->
                    <div class="col-md-6">
                        <label for="card_id" class="form-label">银行卡号</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-credit-card"></i></span>
                            <input type="text" class="form-control" id="card_id" value="系统自动生成" disabled>
                            <button class="btn btn-outline-secondary" type="button" id="generateCardId" disabled>
                                <i class="bi bi-arrow-repeat"></i> 重新生成
                            </button>
                        </div>
                        <small class="text-muted">卡号格式: 10103576 + 8位随机数字</small>
                    </div>

                    <!-- 客户选择 -->
                    <div class="col-md-6">
                        <label for="customer_id" class="form-label">所属客户 <span class="text-danger">*</span></label>
                        <select class="form-select select2" id="customer_id" name="customer_id" required>
                            <option value="" selected disabled>-- 请选择客户 --</option>
                            {% for customer in customers %}
                            <option value="{{ customer.customerID }}" data-phone="{{ customer.phone }}">
                                {{ customer.customerName }} (ID: {{ customer.customerID }})
                            </option>
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">请选择客户</div>
                    </div>

                    <!-- 存款类型 -->
                    <div class="col-md-6">
                        <label for="saving_id" class="form-label">存款类型 <span class="text-danger">*</span></label>
                        <select class="form-select" id="saving_id" name="saving_id" required>
                            <option value="" selected disabled>-- 请选择存款类型 --</option>
                            {% for deposit in deposit_types %}
                            <option value="{{ deposit.savingID }}" data-rate="{{ deposit.interestRate }}">
                                {{ deposit.savingName }} (利率: {{ deposit.interestRate }}%)
                            </option>
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">请选择存款类型</div>
                    </div>

                    <!-- 密码设置 -->
                    <div class="col-md-6">
                        <label for="password" class="form-label">初始密码 <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-lock"></i></span>
                            <input type="password" class="form-control" id="password" name="password" value="888888" required>
                            <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        <small class="text-muted">默认密码: 888888</small>
                        <div class="invalid-feedback">请输入密码</div>
                    </div>

                    <!-- 开户金额 -->
                    <div class="col-md-6">
                        <label for="open_amount" class="form-label">开户金额 (元) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">¥</span>
                            <input type="number" class="form-control" id="open_amount" name="open_amount"
                                   min="1" step="0.01" value="1.00" required>
                        </div>
                        <div class="invalid-feedback">开户金额不能小于1元</div>
                    </div>

                    <!-- 币种 -->
                    <div class="col-md-6">
                        <label class="form-label">币种</label>
                        <div class="form-control bg-light">人民币 (RMB)</div>
                        <input type="hidden" name="currency" value="RMB">
                    </div>
                </div>

                <!-- 表单操作按钮 -->
                <div class="row mt-4">
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bi bi-check-circle me-2"></i>确认开户
                        </button>
                        <a href="{{ url_for('admin_cards') }}" class="btn btn-outline-secondary px-4 ms-2">
                            <i class="bi bi-x-circle me-2"></i>取消
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 表单验证和交互脚本 -->
<script>
$(document).ready(function() {
    // 初始化Select2
    $('.select2').select2({
        theme: 'bootstrap-5',
        placeholder: '-- 请选择客户 --'
    });

    // 密码显示切换
    $('#togglePassword').click(function() {
        const passwordField = $('#password');
        const icon = $(this).find('i');
        const type = passwordField.attr('type') === 'password' ? 'text' : 'password';
        passwordField.attr('type', type);
        icon.toggleClass('bi-eye bi-eye-slash');
    });

    // 表单验证
    (function() {
        'use strict';
        const form = document.getElementById('addCardForm');

        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }

            form.classList.add('was-validated');
        }, false);
    })();

    // 开户金额验证
    $('#open_amount').on('change', function() {
        const value = parseFloat($(this).val());
        if (value < 1) {
            $(this).val('1.00');
        }
    });
});
</script>
{% endblock %}